<template>
  <div>
    <div class="app-container" style="background:#aaa;padding: 5px;">
      <el-container style="height: 650px;">
        <el-aside width="200px" style="padding: 6px 5px;background:#fff;">
          <p style="margin:0">病历/检查项目</p>
          <el-tree
            :data="inspectInfo"
            node-key="id"
            ref="inspectInfo"
            highlight-current
            :props="defaultProps"
            @node-click="getCheckedKeys"
          ></el-tree>
        </el-aside>

        <el-container>
          <el-aside width="200px" style="padding: 6px 5px;background:#fff;">
            <p style="margin:0">指标项</p>
            <el-tree
              :data="indicators"
              node-key="id"
              ref="indicatorsTree"
              highlight-current
              :props="indicatorsProps"
              @node-click="getAdd"
            ></el-tree>
          </el-aside>
        </el-container>
        <div :style="display">
          <el-container>
            <el-aside width="300%" style="padding: 6px 5px;background:#fff;">
              <el-form
                ref="elForm"
                :model="formData"
                :rules="rules"
                size="medium"
                label-width="100px"
              >
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="病历/检查项目名称" prop="project" label-width="150px">
                      <el-input
                        v-model="targetInspectInfo.project"
                        placeholder="请输入病历/检查项目名称"
                        :maxlength="11"
                        show-word-limit
                        clearable
                        prefix-icon="el-icon-mobile"
                        :style="{width: 'calc(100% - 150)'}"
                        :disabled="targetInspectInfo.readOnly"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="18">
                    <el-form-item label="病历/检查项显示名称" prop="projectDesc" label-width="150px">
                      <el-input
                        v-model="targetInspectInfo.projectDesc"
                        placeholder="请输入病历/检查项显示名称"
                        clearable
                        :style="{width: '100%'}"
                        :disabled="targetInspectInfo.readOnly"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="18">
                    <el-form-item label="采集报告" prop="isReported" label-width="150px">
                      <el-switch
                        style="display: block"
                        v-model="targetInspectInfo.isReported"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="是"
                        inactive-text="否"
                        :disabled="targetInspectInfo.readOnly"
                      ></el-switch>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="18">
                    <el-form-item label-width="0">
                      <el-button
                        type="primary"
                        @click="inspectInfoAdd"
                        v-if="targetIndicator.clinicId !== 0 | targetInspectInfo.clinicId !== 0"
                      >新增</el-button>
                      <el-button
                        v-if="targetIndicator.clinicId !== 0 | targetInspectInfo.clinicId !== 0"
                        type="success"
                        @click="saveInspectInfo"
                        :disabled="targetInspectInfo.readOnly"
                      >保存</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>

                <hr style="background: #a39c9c" />

                <el-row>
                  <el-col :span="18">
                    <el-form-item label="指标项名称" prop="name" label-width="150px">
                      <el-input
                        v-model="targetIndicator.name"
                        placeholder="请输入指标项名称"
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-show="false">
                  <el-col :span="18">
                    <el-form-item label="指标项显示名称" prop="desc" label-width="150px">
                      <el-input
                        placeholder="请输入指标项显示名称"
                        clearable
                        :style="{width: '100%'}"
                        v-model="targetIndicator.desc"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="展示类型" prop="kind" label-width="150px">
                      <el-select
                        v-model="targetIndicator.kind"
                        placeholder="请选择展示类型 "
                        clearable
                        :style="{width: '100%'}"
                      >
                        <el-option
                          v-for="(item, index) in kindOptions"
                          :key="index"
                          :label="item.key"
                          :value="item.val"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="参考值" prop="defaulted" label-width="150px">
                      <el-input
                        v-model="targetIndicator.defaulted"
                        placeholder="请输入参考值"
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label-width="150px" label="是否必填" prop="required " required>
                      <el-switch v-model="targetIndicator.required "></el-switch>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label-width="150px" label="启用状态" prop="available" required>
                      <el-switch v-model="targetIndicator.available"></el-switch>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row >
                  <el-col :span="18">
                    <el-form-item label-width="150px" label="字典" prop="dictId "
                                  v-show="targetIndicator.kind !== 0
                                  || targetIndicator.kind !== 1
                                  || targetIndicator.kind !== 2">
                      <el-select
                        v-model="targetIndicator.dictId"
                        :style="{width: '100%'}"
                        filterable
                        remote
                        clearable
                        reserve-keyword
                        placeholder="请输入字典名称"
                        :remote-method="remoteItemMethod"
                        :loading="loading"
                      >
                        <el-option
                          v-for="item in dictIdItemOptions"
                          :key="item.dictionaryName"
                          :label="item.dictionaryName"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-button type="primary"
                    v-if="targetIndicator.clinicId !== 0 | targetInspectInfo.clinicId !== 0"
                    @click="addItem">新增</el-button>
                    <el-button type="success"
                    v-if="targetIndicator.clinicId !== 0 | targetInspectInfo.clinicId !== 0"
                    style="float: right;" @click="saveItem">保存</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-aside>
          </el-container>
        </div>
      </el-container>

      <el-dialog title="新增病历/检查项目" :visible.sync="dialogVisible" width="50%">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-form-item label="病历/检查项目名称" prop="project">
            <el-input
              v-model="formData.project"
              placeholder="请输入病历/检查项目名称"
              clearable
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述说明" prop="projectDesc">
            <el-input
              v-model="formData.projectDesc"
              placeholder="描述说明"
              clearable
              :style="{width: '100%'}"
            ></el-input>
          </el-form-item>

          <el-row>
            <el-switch
              style="display: block"
              v-model="formData.isReported"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="采集报告"
              inactive-text="不采集"
            ></el-switch>
          </el-row>
        </el-form>
        <div slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add(formData)">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="新增指标项" :visible.sync="dialogVisibleItem" width="50%">
        <el-row :gutter="15">
          <el-form
            ref="elItemForm"
            :model="itemData"
            :rules="itemRules"
            size="medium"
            label-width="100px"
          >
            <el-col :span="18">
              <el-form-item label-width="150px" label="检查指标名称" prop="name">
                <el-input
                  v-model="itemData.name"
                  placeholder="请输入单行文本检查指标名称"
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label-width="150px" label="指标信息描述" prop="desc ">
                <el-input
                  v-model="itemData.desc "
                  placeholder="请输入指标信息描述"
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label-width="150px" label="展示类型 " prop="kind">
                <el-select
                  v-model="itemData.kind"
                  placeholder="请选择展示类型 "
                  clearable
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="(item, index) in kindOptions"
                    :key="index"
                    :label="item.key"
                    :value="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label-width="150px" label="字典" prop="dictId ">
                <el-select
                  v-model="itemData.dictId"
                  :style="{width: '100%'}"
                  filterable
                  remote
                  clearable
                  reserve-keyword
                  placeholder="请输入字典名称"
                  :remote-method="remoteMethod"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in dictIdOptions"
                    :key="item.dictionaryName"
                    :label="item.dictionaryName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label-width="150px" label="参考值" prop="defaulted ">
                <el-input
                  v-model="itemData.defaulted "
                  placeholder="请输入参考值"
                  clearable
                  :style="{width: '100%'}"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label-width="150px" label="是否必填" prop="required " required>
                <el-switch v-model="itemData.required "></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label-width="150px" label="启用状态" prop="available" required>
                <el-switch v-model="itemData.available"></el-switch>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div slot="footer">
          <el-button @click="dialogVisibleItem = false">取消</el-button>
          <el-button type="primary" @click="handelConfirm">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { searchDict,getDicts } from "@/api/dict";
import {
  inspectInfo,
  indicators,
  inspectInfoAdd,
  saveInspectInfo,
  saveIndicators,
  saveItem
} from "@/api/emrSetting";
import { getTree } from "@/utils/tree";

export default {
  name: "emrInfo",
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisibleItem: false,
      formData: {
        available: true,
        isReported: true,
        parentId: "",
        project: "",
        projectDesc: "",
        readOnly: false
      },

      rules: {
        isReported: [
          {
            required: true,
            message: "是否采集报告不能为空",
            trigger: "change"
          }
        ]
      },
      itemData: {
        available: true,
        defaulted: "",
        desc: "",
        dictId: "",
        infoId: "",
        kind: "1",
        name: "",
        readOnly: false,
        required: true,
        clinicId: "",
        pid: ""
      },
      itemRules: {
        name: [
          {
            required: true,
            message: "请输入单行文本检查指标名称",
            trigger: "blur"
          }
        ],
        desc: [],
        kind: [
          {
            required: true,
            message: "请选择展示类型 ",
            trigger: "change"
          }
        ],
        dictId: [],
        defaulted: []
      },
      dictIdOptions: [],
      kindOptions: [],
      isReportedOptions: [],
      subdirectories: null,
      subData: null,
      display: "",
      inspectInfo: [],
      indicators: [],
      title: null,
      str: null,
      string: null,

      defaultProps: {
        children: "children",
        label: "project"
      },
      indicatorsProps: {
        children: "children",
        label: "name"
      },
      //点击病历或检查节点信息
      targetInspectInfo: {},
      //点击指标节点信息
      targetIndicator: {},

      dictIdItemOptions: [],
      loading: false
    };
  },
  methods: {},

  created() {
    window.app = this
    this.display = "display:none";
    this.getEmrInfo();
    console.log(this);

    searchDict({ key: "组件" }).then(response => {
      if (response.code === 200) {
        this.kindOptions = response.page.filter(function(item) {
          return item.available;
        });
      }
    });
  },

  methods: {
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          searchDict({ key: query }).then(response => {
            if (response.code === 200) {
              this.dictIdOptions = response.page.list.filter(function(item) {
                return item.available;
              });
              console.log(response);
            }
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    remoteItemMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          getDicts({ key: query }).then(response => {
            if (response.code === 200) {
              this.dictIdItemOptions = response.page.list.filter(function(
                item
              ) {
                return item.available;
              });
              console.log(response);
            }
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    //新增编辑检查项目
    handelConfirm() {
      this.itemData.infoId = this.targetInspectInfo.id;
      this.itemData.pid = this.targetIndicator.id;
      this.itemData.clinicId = this.targetInspectInfo.clinicId;

      saveIndicators(this.itemData).then(response => {
        if (response.code === 200) {
          this.dialogVisibleItem = false;

          this.itemData.name = "";
          indicators({ infoId: this.targetInspectInfo.id }).then(response => {
            if (response.code === 200) {
              this.form = response.page;
              this.indicators = this.getItemTree(this.form);
            }
          });

          this.$message({
            showClose: true,
            message: response.msg,
            type: "success"
          });
        }
      });
    },

    //编辑保存指标
    saveItem() {
      this.itemData.infoId = this.targetInspectInfo.id;
      this.itemData.clinicId = this.targetInspectInfo.clinicId;
      this.itemData.readOnly = this.targetIndicator.readOnly;
      this.itemData.version = this.targetIndicator.version;
      this.itemData.pid = this.targetIndicator.pid;
      this.itemData.infoId = this.targetIndicator.infoId;
      this.itemData.id = this.targetIndicator.id;
      this.itemData.name = this.targetIndicator.name;
      this.itemData.kind = this.targetIndicator.kind;
      this.itemData.available = this.targetIndicator.available;
      this.itemData.required = this.targetIndicator.required;
      this.itemData.defaulted = this.targetIndicator.defaulted;
      this.itemData.dictId = this.targetIndicator.dictId;

      saveItem(this.itemData).then(response => {
        if (response.code === 200) {
          this.dialogVisibleItem = false;
          this.targetIndicator.version++;
          this.$message({
            showClose: true,
            message: response.msg,
            type: "success"
          });
        }
      });
      // location.reload();
    },

    addItem() {
      this.dialogVisibleItem = true;
    },
    //保存检查项目
    saveInspectInfo() {
      saveInspectInfo({
        "available": this.targetInspectInfo.available,
        "clinicId": this.targetInspectInfo.clinicId,
        "id": this.targetInspectInfo.id,
        "isReported": this.targetInspectInfo.isReported,
        "parentId": this.targetInspectInfo.parentId,
        "project": this.targetInspectInfo.project,
        "projectDesc": this.targetInspectInfo.projectDesc,
        "readOnly": this.targetInspectInfo.readOnly,
        "remark": this.targetInspectInfo.remark,
        "version":this.targetInspectInfo.version
      }).then(response => {
        if (response.code === 200) {
          this.$message({
            showClose: true,
            message: response.msg,
            type: "success"
          });
        }
      });
    },
    getCheckedKeys(inspectInfo) {
      this.targetInspectInfo = inspectInfo;
      this.targetIndicator = {};
      this.display = "";

      indicators({ infoId: inspectInfo.id }).then(response => {
        if (response.code === 200) {
          this.form = response.page;
          this.indicators = this.getItemTree(this.form);
        }
      });
    },
    getEmrInfo() {
      inspectInfo({}).then(response => {
        if (response.code === 200) {
          this.form = response.page;
          let tree = getTree(this.form);
          this.inspectInfo = tree;
        }
      });
    },
    getAdd(indicators) {
      this.targetIndicator = indicators;
      this.targetIndicator.kind = this.targetIndicator.kind + "";
      this.display = "";

      if (indicators.dictId) {
        getDicts({ id: indicators.dictId }).then(response => {
          if (response.code === 200) {
            this.dictIdItemOptions = response.page.list.filter(function(item) {
              return item.available;
            });
            console.log(response);
          }
        });
      }
    },

    getItemTree(d) {
      let temp = {};
      for (let k in d) {
        if (!temp[d[k].id]) {
          temp[d[k].id] = d[k];
        }
      }
      let tree = [];
      for (let i in temp) {
        if (temp[i].pid) {
          if (!temp[temp[i].pid].children) {
            temp[temp[i].pid].children = [];
          }
          temp[temp[i].pid].children.push(temp[i]);
        } else {
          tree.push(temp[i]);
        }
      }
      return tree;
    },

    //打开新增检查项目
    inspectInfoAdd() {
      this.dialogVisible = true;
    },
    //新增指标项
    addindicators() {
      this.dialogVisible = true;
      this.title = "新增指标项";
      this.str = "指标项名称";
      this.string = "指标项显示名称";
    },
    //保存新增检查项目
    add(formData) {
      formData.parentId = this.targetInspectInfo.id;

      this.dialogVisible = false;

      inspectInfoAdd(formData).then(response => {
        if (response.code === 200) {
          this.form = {};
          let item = response.data;
          this.targetInspectInfo.children.push({
            children: [],
            parentId: item.parentId,
            isReported: item.reported,
            project: item.name,
            projectDesc: item.desc,
            id: item.id
          });
        }
      });
    }
  }
};
</script>

<style scope>
.el-container {
  height: 650px;
  padding-left: 2px;
  flex-grow: 0;
}
.el-tree-node__content {
  font-size: 14px !important;
}
.el-tree-node__label {
  font-size: 14px !important;
}
</style>
